<template>
  <Bar :data="chartData" :options="chartOptions" />
</template>

<script setup>
import { Bar } from 'vue-chartjs'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

const chartData = {
  labels: ['苹果', '香蕉', '橙子', '葡萄','苹果', '香蕉', '橙子', '葡萄'],
  datasets: [
    {
      label: '库存数量',
      data: [12, 19, 8, 15, 12, 19, 8, 15],
      backgroundColor: 'rgba(54, 162, 235, 0.5)'
    }
  ]
}

const chartOptions = {
  responsive: true,
  plugins: {
    legend: { position: 'top' },
    title: { display: true, text: '水果库存柱状图' }
  }
}
</script>
